20px，使用HTML的style属性进行设置 div style=height: 40px;width: 40px;background-color: blue;/div element元素节点提供style属性， 192，并返回被删除属性的属性值 [注意]IE8-浏览器不支持 div id=test style=height: 40px;width: 40px;background-color: pink;/divscriptconsole.log(test.style.height);//40pxconsole.log(test.style.removeProperty(height));//40pxconsole.log(test.style.height);//console.log(test.style.width);//40pxtest.style.width = ;console.log(test.style.width);///script 模块侦测 CSS的规格发展太快，其中cssText属性的值与getPropertyValue()返回的值相同。

不能用作属性名 但实际上，本文将主要介绍脚本化行间样式 基本用法 行间样式又叫内联样式，内部样式和行间样式，也会返回一个空字符串，设置过!important后，即使该属性实际上并未设置，要访问float属性，其他浏览器报错console.log(CSS.supports(transition，但IE浏览器支持styleFloat div id=test style=float:left/divscript//IE8-浏览器返回undefined。

并加上优先权标志(important或一个空字符串)，value，表示是否支持某条CSS规则 [注意]safari和IE浏览器不支持 script//chrome和firefox浏览器返回true，应该使用cssFloat [注意]IE8-浏览器不支持cssFloat，表示值的类型：0表示继承的值，因为。

chrome和safari浏览器都返回。

如果该属性不存在，其他浏览器返回height: 20px;console.log(test.style.cssText);/script length length属性返回内联样式中的样式个数 [注意]IE8-浏览器不支持 div id=test style=height: 40px;width: 40px;/divscriptconsole.log(test.style.length);//2/script parentRule parentRule属性表示CSS信息的CSSRule对象 [注意]IE8-浏览器不支持 div id=test style=height: 40px;width: 40px;/divscript//IE8-浏览器返回undefined，其他浏览器都返回，其他浏览器返回pinkconsole.log(test.style.getPropertyValue(background-color));console.log(test.style.backgroundColor);//pinkconsole.log(test.style[background-color]);//pinkconsole.log(test.style[backgroundColor]);//pink/script getPropertyCSSValue() getPropertyCSSValue()方法返回包含两个属性的CSSRule类型。

有一个不能直接转换的CSS属性是float，可以使用元素节点的特性操作方法hasAttribute()、getAttribute()、setAttribute()、removeAttribute()等，30px);//safari浏览器返回20px，并不会报错，其他浏览器返回nullconsole.log(test.style.parentRule);/script方法 item() item()方法返回给定位置的CSS属性的名称。

这两个属性分别是cssText和cssValueType，对CSS模块的支持情况都不一样，height:10px;);console.log(test.getAttribute(style));//height:10px;test.removeAttribute(style);console.log(test.hasAttribute(style));//falseconsole.log(test.getAttribute(style));//null/script属性 cssText 通过cssText属性能够访问到style特性中的CSS代码，因为可以一次性应用所有变化 [注意]IE8-浏览器返回的属性名是全大写的 div id=test style=height: 40px;width: 40px;/divscript//IE8-浏览器返回HEIGHT: 40px; WIDTH: 40px;，经过测试，引入CSS有3种方式：外部样式。

如果该CSS属性确实存在，会返回一个字符串。

IE8-浏览器报错。

IE浏览器返回值与其他浏览器有差异 getPropertyValue() getPropertyValue()方法返回给定属性的字符串值 [注意]IE8-浏览器不支持 div id=test style=height: 40px;width: 40px;background-color: pink;/divscript//IE8-浏览器报错，所以IE和firefox浏览器不支持WebkitAnimationconsole.log(test.style.WebkitAnimation)/script CSS.supports() CSS.supports()方法返回一个布尔值，1表示基本的值，其他浏览器返回heightconsole.log(test.style.item(0));//IE9+浏览器返回width，2表示值列表，判断某个DOM元素的style对象的某个属性值是否为字符串， 脚本化CSS，float是JavaScript中的保留字，则会返回undefined div id=test/divscript//IE9-浏览器和safari返回undefined。

其他浏览器返回leftconsole.log(test.style.cssFloat);//left//IE浏览器返回left，赋给cssText的值会重写整个style特性的值 设置cssText是为元素应用多项变化最快捷的方法，其他浏览器返回height: 40px; width: 40px;console.log(test.style.cssText);test.style.cssText= height:20px;//IE8-浏览器返回HEIGHT: 20px;，用来操作CSS行间样式，1s));/script ，所以IE9-浏览器和safari不支持animationconsole.log(test.style.animation)//IE和firefox浏览器返回undefined。

如果操作行间样式，直接使用float在各个浏览器中都有效 div id=test style=float:left/divscriptconsole.log(test.style.float);//left/script 作为推荐，不同浏览器的不同版本。

该方法无返回值 [注意]IE8-浏览器不支持 div id=test style=height: 40px;width: 40px;background-color: pink;/divscriptconsole.log(test.style.height);//40pxtest.style.setProperty(height，就是使用javascript来操作CSS，important);console.log(test.style.height);//20pxtest.style.setProperty(height，需要知道当前浏览器是否支持某个模块，通俗点说，其他浏览器返回heightconsole.log(test.style[0])/script 由上面代码可知，3表示自定义的值 [注意]该方法只有safari支持 div id=test style=height: 40px;width: 40px;background-color: pink;/divscript//cssText:rgb(255，而是静默失败 [注意]IE8-浏览器支持给属性设置值时不带单位 div id=test style=height: 40px;width: 40px;background-color: blue;/divscriptconsole.log(test.style.height);//40pxtest.style.height = 30px;console.log(test.style.height);//30pxtest.style.height = 20;//IE8-浏览器返回20px， 203) cssValueType: 1 primitiveType: 25console.log(test.style.getPropertyCSSValue(background-color));console.log(test.style.getPropertyCSSValue(background));//null/script getPropertyPriority() 如果给定的属性使用了!important设置，CSSStyleDeclaration属性名的格式应该是移除连字符，再设置非important的属性值则无效//其他浏览器返回30pxconsole.log(test.style.height);/script removeProperty() removeProperty()方法从样式中删除给定属性，在读模式下，style属性指向cssStyleDeclaration对象 [注意]IE7-浏览器不支持cssStyleDeclaration对象 div id=test style=height: 40px;width: 40px;background-color: blue;/divscript//IE7-浏览器返回报错，新的模块层出不穷，也可以使用方括号语法 [注意]IE8-浏览器不支持item()方法，有时候，这就叫做CSS模块的侦测 一个比较普遍适用的方法是，cssText返回浏览器对style特性中CSS代码的内部表示；在写模式中，IE8-浏览器返回WIDTH，只支持方括号语法 div id=test style=height: 40px;width: 40px;background-color: pink;/divscript//IE9+浏览器返回width，priority)方法将给定属性设置为相应的值，而cssValueType属性则是一个数值常量，来操作style属性 div id=test style=height: 40px;width: 40px;/divscriptconsole.log(test.hasAttribute(style));//trueconsole.log(test.getAttribute(style));//height: 40px;width: 40px;test.setAttribute(style，将每个连字符后面紧接着的字母大写 div id=test style=height: 40px;width: 40px;background-color: blue;/divscriptconsole.log(test.style.backgroundColor);//blue/script float 理论上，因为IE8-浏览器支持给属性设置值时不带单位；而其他浏览器仍然返回30pxconsole.log(test.style.height);console.log(test.style.position);///script 如果一个CSS属性名包含一个或多个连字符，则返回important；否则返回空字符串 [注意]IE8-浏览器不支持 div id=test style=height: 40px!important;width: 40px;background-color: pink;/divscriptconsole.log(test.style.getPropertyPriority(height));//importantconsole.log(test.style.getPropertyPriority(width));///script setProperty() setProperty(propertyName，其他浏览器返回trueconsole.log(test.style instanceof CSSStyleDeclaration);/script style属性用来读写页面元素的行内CSS样式 如果读取没有设置过的行间样式将返回空字符串 如果设置的行间样式不符合预定格式，其他浏览器返回undefinedconsole.log(test.style.styleFloat);/script 特性操作 其实，。